<template>
    <div class="home">
        <div class="container">
            <div class="flex-row flex-item">
                <el-radio-group v-model="network" size="small" class="left-btn" @change="pageLoad">
                    <el-radio-button v-for="item in networks" :label="item.value" :key="item.value">{{ item.label }}</el-radio-button>
                </el-radio-group>
                <div class="flex1"></div>
                <el-button @click="drawer = true" type="text">
                    <div class="btn-text flex-row flex-item">
                        <i class="el-icon-s-tools"></i>
                        <span>面板设置</span>
                    </div>
                </el-button>
            </div>
            <div class="flex-row">
                <div class="user-msg-item">
                    <div class="user-msg-item-left">
                        <i class="el-icon-s-custom"></i>
                        <span>欢迎您， {{ baseInfo.realName }}</span>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="user-msg-item-right">
                        <p>上次登陆时间：{{moment(indexData.lastLoginTime).format('YYYY-MM-DD HH:mm:ss')}}</p>
                        <p>上次登陆IP：{{ indexData.lastLoginIp}}</p>
                    </div>
                </div>
                <div class="user-msg-item flex1">
                    <!--          缺切图-->
                    <i class="el-icon-warning"></i>
                    <span style="font-weight: bold">待处理告警：</span>
                    <span class="num">{{ indexData.alarmNum }}</span>
                </div>
                <div class="user-msg-item flex1">
                    <!--          缺切图-->
                    <i class="el-icon-warning"></i>
                    <span style="font-weight: bold">待分析系统故障：</span>
                    <span class="num">{{ indexData.faultNum }}</span>
                </div>
            </div>
            <div class="chart-content">
                <div v-if="pannelConfig.gjzl.show" class="content-item">
                    <gjzl ref="gjzl" @switch="switchView('gjzl')"></gjzl>
                </div>
                <div v-if="pannelConfig.sbzl.show" class="content-item">
                    <sbzl ref="sbzl" @switch="switchView('sbzl')"></sbzl>
                </div>
                <div v-if="pannelConfig.gzfxl.show" class="content-item">
                    <gzfxl ref="gzfxl" @switch="switchView('gzfxl')"></gzfxl>
                </div>
                <div v-if="pannelConfig.gjcll.show" class="content-item">
                    <gjcll ref="gjcll" @switch="switchView('gjcll')"></gjcll>
                </div>
                <div v-if="pannelConfig.gzzl.show" class="content-item">
                    <gzzl ref="gzzl" @switch="switchView('gzzl')"></gzzl>
                </div>
                <div v-if="pannelConfig.gzpml.show" class="content-item">
                    <gzpml ref="gzpml" @switch="switchView('gzpml')"></gzpml>
                </div>
                <div v-if="pannelConfig.gjlpm.show" class="content-item">
                    <gjlpm ref="gjlpm" @switch="switchView('gjlpm')"></gjlpm>
                </div>
            </div>
        </div>
        <el-drawer
                title="面板配置"
                :visible.sync="drawer">
            <panelSet @change="configChange" :optionsDefaultVals="pannelConfig"></panelSet>
        </el-drawer>
    </div>
</template>
<script>
import { networks } from '@/assets/dict'
import { mapState } from 'vuex'
import {setStorage, getStorage} from '@/utils/storage';
import {pannelConfig} from './modules/config';
import gjzl from './echarts/gjzl';
import sbzl from './echarts/sbzl';
import gzfxl from './echarts/gzfxl';
import gjcll from './echarts/gjcll';
import gzzl from './echarts/gzzl';
import gzpml from './echarts/gzpml';
import gjlpm from './echarts/gjlpm';
import moment from 'moment'
import panelSet from './modules/panelSet'

export default {
  name: 'home',
  components: {
    gjzl,
    sbzl,
    gzfxl,
    gjcll,
    gzzl,
    gzpml,
    gjlpm,
    panelSet
  },
  data() {
    return {
      drawer: false,
      moment,
      networks,
      network: 'JZW',
      pannelConfig: JSON.parse(JSON.stringify(pannelConfig)),
      indexData: {
        lastLoginTime: '',
        lastLoginIp: '',
        alarmNum: 0,
        faultNum: 0
      }
    }
  },
  methods: {
    switchView(key) {
      const faultType = this.pannelConfig[key]?.faultType
      const alarmType = this.pannelConfig[key]?.alarmType
      const devType = this.pannelConfig[key]?.devType
      if (faultType) {
        this.pannelConfig[key].faultType = faultType === 1 ? 2 : 1
        const params = { network: this.network, faultType: this.pannelConfig[key].faultType }
        const item = this.pannelConfig[key]
        this.$refs[key]?.getChartData(params, item.series)
      } else if (alarmType) {
        this.pannelConfig[key].alarmType = alarmType === 1 ? 2 : 1
        const params = { network: this.network, alarmType: this.pannelConfig[key].alarmType }
        const item = this.pannelConfig[key]
        this.$refs[key]?.getChartData(params, item.series)
      } else if (devType) {
        this.pannelConfig[key].devType = devType === 1 ? 2 : 1
        const params = { network: this.network, devType: this.pannelConfig[key].devType }
        const item = this.pannelConfig[key]
        this.$refs[key]?.getChartData(params, item.series)
      }
    },
    getIndexData() {
      this.$http.get('/dataView/getIndexData?network=' + this.network).then(res => {
        this.indexData = res
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      })
    },
    configChange(res) {
      this.pannelConfig = res
      setStorage('pannelConfig-1029', res)
      this.pageLoad()
    },
    pageLoad() {
      let sort = 0
      for (let key in this.pannelConfig) {
        const item = this.pannelConfig[key]
        if (item.show) {
          sort++
          setTimeout(() => {
            this.getIndexData()
            const params = { network: this.network }
            if (item.faultType) {
              params.faultType = item.faultType
            }
            if (item.devType) {
              params.devType = item.devType
            }
            if (item.alarmType) {
              params.alarmType = item.alarmType
            }
            this.$refs[key]?.getChartData(params, item.series)
          }, sort * 100)
        }
      }
    }
  },
  mounted() {
    const pannelConfig = getStorage('pannelConfig-1029')
    if (pannelConfig) {
      this.pannelConfig = {...pannelConfig}
    }
    this.pageLoad()
    this.getIndexData()
  },
  computed: {
    ...mapState('userInfo', ['baseInfo'])
  }
}
</script>
<style lang="scss" scoped>
    .home {
        display: flex;
        width: 100%;
    }

    .container {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        .btn-text {
            font-size: 14px;
            .el-icon-s-tools {
                font-size: 18px;
            }
        }
    }

    .user-msg-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33%;
        height: 72px;
        padding: 10px;
        margin-right: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        .el-divider {
            height: 80%;
            background: #cccccc;
        }
        .user-msg-item-left {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-msg-item-right {
            padding-left: 10px;
            flex: 2;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            p {
                margin: 6px;
            }
        }
        .num {
            padding: 2px 4px;
            margin-left: 30px;
            border-radius: 10px;
            color: #ffffff;
            text-align: center;
        }
    }

    .user-msg-item:nth-child(1) {
        background: linear-gradient(to right, rgba(102, 178, 255, 0.5), #f6f6f6);
        flex: 2;
    }

    .user-msg-item:nth-child(2) {
        background: linear-gradient(to right, rgba(255, 179, 179, 0.5), #f6f6f6);
        .num {
            background: #ff1a1a;
        }
    }

    .user-msg-item:nth-child(3) {
        background: linear-gradient(to right, rgba(255, 209, 26, 0.5), #f6f6f6);
        margin-right: 0;
        .num {
            background: #ffa31a;
        }
    }

    .chart-content {
        padding-top: 10px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: calc(100vh - 190px);
        overflow: auto;
        .content-item {
            width: 33%;
            height: 354px;
        }
    }
</style>